<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="99px">
        <el-col :span="22">
          <el-form-item label="路径" prop="path">
            <el-input v-model="formData.path" placeholder="请输入路径" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="ffmpeg路径" prop="ffmpegPath">
            <el-input v-model="formData.ffmpegPath" placeholder="请输入ffmpeg路径" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="开始时间" prop="startTime">
            <el-input v-model="formData.startTime" placeholder="请输入开始时间" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="片尾时长" prop="endDuration">
            <el-input v-model="formData.endDuration" placeholder="请输入片尾时长（单位：秒）" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="重置描述" prop="resetMetaData" required>
            <el-switch v-model="formData.resetMetaData"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="音频图片">
            <el-upload ref="uploadFile2"
                       accept="image/*" name="pictureFile"
                       :limit="1"
                       :before-upload="beforeUpload"
                       :auto-upload="false"
                       :headers="headers"
                       :on-success="handleSuccess"
                       :on-error="handleError"
                       :on-change="addFile2"
                       action=""
            >
              <el-button size="small" type="primary" icon="el-icon-upload">上传图片</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="专辑名" prop="album">
            <el-input v-model="formData.album" placeholder="请输入专辑名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="专辑艺术家" prop="albumArtist">
            <el-input v-model="formData.albumArtist" placeholder="请输入专辑艺术家" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="艺术家" prop="artist">
            <el-input v-model="formData.artist" placeholder="请输入艺术家" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="作曲家" prop="composer">
            <el-input v-model="formData.composer" placeholder="请输入作曲家" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入标题" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="注释" prop="comment">
            <el-input v-model="formData.comment" placeholder="请输入注释" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item size="large">
            <el-button type="primary" @click="doSubmit">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import {getToken} from '@/utils/auth'
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime, downloadFile} from '@/utils/index'
    import {multiMediaHandleMultiModifyMusicFile} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'

    export default {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    ffmpegPath: '',
                    path: '',
                    startTime: '00:00:00',
                    endDuration: '',
                    resetMetaData: true,
                    album: '',
                    albumArtist: '',
                    artist: '',
                    composer: '',
                    title: '',
                    comment: '',
                },
                rules: {
                    ffmpegPath: [],
                    path: [{required: true, message: '不能为空', trigger: 'blur'}],
                    startTime: [],
                    endDuration: [],
                    album: [],
                    albumArtist: [],
                    artist: [],
                    composer: [],
                    title: [],
                    comment: [],
                },
                fileList2: [],
                headers: {'Authorization': 'Bearer ' + getToken()}
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
            doSubmit() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        let pictureFile = this.fileList2[0];
                        const form = new FormData()
                        // 文件对象
                        if (pictureFile != undefined && pictureFile != null) {
                            form.append('pictureFile', pictureFile);
                        }
                        form.append('ffmpegPath', this.formData.ffmpegPath);
                        form.append('path', this.formData.path);
                        form.append('startTime', this.formData.startTime);
                        form.append('endDuration', this.formData.endDuration);
                        form.append('resetMetaData', this.formData.resetMetaData);
                        form.append('album', this.formData.album);
                        form.append('albumArtist', this.formData.albumArtist);
                        form.append('artist', this.formData.artist);
                        form.append('composer', this.formData.composer);
                        form.append('title', this.formData.title);
                        form.append('comment', this.formData.comment);
                        let outputFileName = `批量剪辑` + `.zip`;

                        multiMediaHandleMultiModifyMusicFile(form).then(res => {
                            downloadFileFunction(res, outputFileName)
                            this.resetForm()
                            this.$notify({
                                title: '文件处理成功',
                                type: 'success',
                                duration: 2500
                            })
                        }).catch(err => {
                            console.log(err);
                        });
                    } else {
                        return false
                    }
                });
            },
            beforeUpload(file) {
                let isLt2M = true
                isLt2M = file.size / 1024 / 1024 < 100
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 100MB!')
                }
                this.loading = false
                return isLt2M
            },
            handleSuccess(response, file, fileList) {
                //this.bodyContainer = response
                //this.$refs.upload.clearFiles()
                //this.resetForm()
            },
            addFile2(file) {
                console.log(file)
                this.fileList2.push(file.raw);
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
                this.$refs.uploadFile2.clearFiles()
                this.fileList2 = []
            },
            // 监听上传失败
            handleError(e, file, fileList) {
                const msg = JSON.parse(e.message)
                this.$notify({
                    title: msg.message,
                    type: 'error',
                    duration: 2500
                })
                this.loading = false
            },
        }
    }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
